import { Radio, RadioChangeEvent } from 'antd';
import { inject, observer } from 'mobx-react';
import React from 'react';
import CommonStore from '@/stores/CommonStore';
import { withRouter } from 'react-router-dom';
import { RouteConfigComponentProps } from 'react-router-config';
import styles from './index.module.scss';

interface IProps extends RouteConfigComponentProps<void>{
  commonStore?: CommonStore;
}

@inject('commonStore')
@observer
class Header extends React.Component<IProps> {
  handleChange = (e: RadioChangeEvent) => {
    const { commonStore, history } = this.props;
    const { setCurrentRoute } = commonStore as CommonStore;
    const { value } = e.target;
    setCurrentRoute(value);
    history.push(value);
  };

  render() {
    const { commonStore } = this.props;
    const { currentRoute, routesOptions } = commonStore as CommonStore;
    return (
      <header className={styles.header}>
        <Radio.Group
          options={routesOptions}
          value={currentRoute}
          buttonStyle="solid"
          optionType="button"
          onChange={this.handleChange}
        />

      </header>
    );
  }
}

export default withRouter(Header);
